<template>
  <div>
    <div>欢迎来第六文明挑选傻狗</div>
    <div class="box" v-for="(item, i) in dogs" :key="i">
      <div class="box1"><img :src="item.img" alt="" /></div>
      <div class="box1">{{ item.name }}</div>
      <div class="box1">
        <button @click="item.num++">+</button>
        {{ item.num }}
        <button  :disabled="item.num == 0" @click="item.num--">-</button>
      </div>
      <div class="box1">单价：{{ item.price }}元</div>
      <div class="box1">小计:{{ item.price * item.num }}元</div>
    </div>
    <div>总价：{{ getTotalPrice() }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dogs: [
        {
          img: require("../assets/dog1.png"),
          name: "杂技狗",
          price: 3000,
          num: 1,
        },
        {
          img: require("../assets/dog2.png"),
          name: "网红皮皮",
          price: 4000,
          num: 1,
        },
        {
          img: require("../assets/dog3.png"),
          name: "哈士奇",
          price: 10,
          num: 1,
        },
        {
          img: require("../assets/dog4.png"),
          name: "拖地狗",
          price: 2000,
          num: 1,
        },
      ],
    };
  },
  computed: {
    total() {
      return this.getTotalPrice();
    },
  },
  methods: {
    getTotalPrice() {
      return this.dogs.reduce((sum, dog) => {
        return sum + dog.price * dog.num;
      }, 0);
    },
  },
};
</script>

<style scoped>
.box{
  width: 800px;
  height: 160px;
  display: flex;
  margin: 0 auto;
}
.box1{
  width: 160px;
  height: 160px;
  border: 1px solid black;
  text-align: center;
  line-height: 160px;
}
.box1 img{
  width: 160px;
  height: 160px;
}
</style>